<template>
  <div>
    <div style="float:left;margin:10px">
      <el-button size="mini" type="primary" @click="openUnitDialog()">添加单位</el-button>
    </div>

    <el-table
            :data="unitList"
            border
            size="mini"
            :header-cell-style="{background:'#f2f3f7', color: '#333', textAlign: 'center'}"
            style="width: 100%"
    >
      <el-table-column type="index" align="center" label="序号" width="50" :index="indexMethod" />
      <el-table-column prop="name" align="center" label="单位名称" width="180" />
      <el-table-column prop="describe" label="描述" />
      <el-table-column label="是否同步商户" width="120" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.synMerchant">
            <el-tag size="mini" type="success">是</el-tag>
          </div>
          <div v-else>
            <el-tag size="mini" type="danger">否</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" align="center" width="180" label="创建时间" />
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <el-link style="font-size: 13px;" type="primary" @click="editUnit(scope.row)">编辑<i class="el-icon-delete el-icon--right" /></el-link>
          <el-link style=";font-size: 13px;font-size: 13px;" type="primary" @click="delUnit(scope.row.id)">删 除<i class="el-icon-delete el-icon--right" /></el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
            small
            style="overflow: auto hidden; height: 32px;float:right;"
            :current-page="page.currPage"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalCount"
            @size-change="pageSizeChange"
            @current-change="pageCurrentChange"
    />

    <el-dialog
            title="新增单位"
            :visible.sync="addUnitDialog"
            :close-on-click-modal="false"
            width="30%"
            center
            @close="afterUnitDialog()"
    >
      <el-form ref="unitForm" :model="addUnitEntity" :rules="rulesList" class="normalForm">
        <el-form-item label="单位名称" prop="name" label-width="120px">
          <el-input v-model="addUnitEntity.name" size="small" placeholder="请输入单位名称" />
        </el-form-item>
        <el-form-item label="单位描述" label-width="120px">
          <el-input v-model="addUnitEntity.describe" size="small" placeholder="请输入单位描述" />
        </el-form-item>
        <el-form-item label="是否同步商家"  label-width="120px">
          <el-radio v-model="addUnitEntity.synMerchant" :label=true>是</el-radio>
          <el-radio v-model="addUnitEntity.synMerchant" :label=false>否</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="addUnitMethod()">确 定</el-button>
        <el-button size="mini" @click="cancle()">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { productAjax } from 'Ajax'
  const { listUnit, addUnit, updateUnit, delUnitById } = productAjax
  export default {
    name: 'ProductUnit',
    data() {
      return {
        // 遮罩层
        loading: true,
        // 单位list
        unitList: [],
        // 添加单位
        addUnitEntity: {synMerchant:false},
        // 添加单位弹出层
        addUnitDialog: false,
        type:'add',
        title:'',
        queryData: {
          pageNum: 1,
          pageSize: 10
        },
        page: {
          currPage: 1,
          pageSize: 10,
          totalCount: 100
        },
        rulesList: {
          name: [{ required: true, message: '请输入单位名', trigger: 'blur' }]
        }
      }
    },
    created() {
      this.getUnitList()
    },
    methods: {
      getUnitList() {
        this.loading = true
        listUnit(this.queryData).then(response => {
          this.unitList = response.list
          this.page.currPage = response.currPage
          this.page.pageSize = response.pageSize
          this.page.totalCount = response.totalCount
          this.loading = false
        })
      },
      pageSizeChange(val) {
        this.queryData.pageSize = val
        this.getUnitList()
      },
      pageCurrentChange(val) {
        this.queryData.pageNum = val
        this.getUnitList()
      },
      delUnit(id) {
        const _this = this
        delUnitById({ unitId: id }).then(response => {
          this.msgSuccess('删除成功')
          _this.getUnitList()
        })
      },
      openUnitDialog() {
        this.addUnitDialog = true
        this.title = "新增单位"
        this.type = 'add'
      },
      editUnit(row){
        this.title = "编辑单位"
        this.type = 'edit'
        this.addUnitDialog = true
        debugger;
        this.addUnitEntity = JSON.parse(JSON.stringify(row))
      },
      cancle(){
        this.addUnitEntity = {synMerchant:false}
        this.addUnitDialog = false
      },
      addUnitMethod() {
        this.$refs['unitForm'].validate((valid) => {
          if (valid) {
            const _this = this
            if(this.type === 'add'){
              addUnit(this.addUnitEntity).then(response => {
                this.msgSuccess('添加成功')
                _this.addUnitEntity = {synMerchant:false}
                _this.addUnitDialog = false
                _this.getUnitList()
              })
            }else{
              updateUnit(this.addUnitEntity).then(response => {
                this.msgSuccess('编辑成功')
                _this.addUnitEntity = {synMerchant:false}
                _this.addUnitDialog = false
                _this.getUnitList()
              })
            }

          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      afterUnitDialog() {
        this.addUnitEntity = {}
      },
      indexMethod(index) {
        return index + 1
      },
      isBlank(str) {
        if (str === '' || str == null || str === undefined) { // "",null,undefined
          return true
        }
        return false
      },
      isNotBlank(str) {
        if (this.isBlank(str)) {
          return false
        }
        return true
      }
    }
  }
</script>

<style scoped>
  .normalForm >>> .el-form-item__label {
    font-weight:normal
  }
</style>
